<template>
	<view class="page">
		
		<tpf-nav-bar ref="tpfNavBar" status-bar fixed hasCenter :fixedHeight="tpfNavBar.fixedHeight" :left="tpfNavBar.left" :center="tpfNavBar.center" :right="tpfNavBar.right" @iconTap="tpfNavBarIconTap" :style="'background-color:'+tpfNavBar.backgroundColor" @getNavBarMaxHeight="getNavBarMaxHeight"></tpf-nav-bar>
		
		<scroll-view class="page-scroll" scroll-y :scroll-top="pageScrollTop" @scroll="pageScroll" :style="{top:this.navMaxHeight+'px'}">
			<view class="room-list">
				<navigator class="room" v-for="(room, roomIndex) of roomList" :key="roomIndex" url="">
					<image class="room-bg-img" :src="room.bgImage"></image>
					<view class="room-title">
						<view class="room-info">
							<image class="room-avatar" :src="room.avatar"></image>
							<text class="room-name">{{room.name}}</text>
						</view>
						<view class="room-status">
							<view class="live-status-wrap">
								<view class="live-status">
									<text class="live-status-text">直播</text>
									<tpf-dynamic-wave class="live-status-wave" :started="true" pillarMaxHeight="10px" pillarColor="#FFF"></tpf-dynamic-wave>
								</view>
							</view>
							<text class="room-person-count">{{room.personCount > 10000 ? room.personCount/10000 + '万' : room.personCount}}人</text>
						</view>
					</view>
					
					<view class="room-content">
						<view class="product-list">
							<view class="product" v-for="(product, productIndex) of room.productList" :key="productIndex" v-if="productIndex<5">
								<image class="product-image" :src="product.image"></image>
								<text class="product-price" v-if="room.productList.length - 1 !== productIndex">￥{{product.price}}</text>
							</view>
							<text class="product product-count-mask">共{{room.productCount}}件</text>
						</view>
					</view>
				</navigator>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import data from '@/data/home/find/live/live.js';
	import config from '@/mixins/home/find/live/live.js'
	const customData = {
		old: {
			pageScrollTop: 0,
		}
	}	
	
	export default {
		//inject: ['find'],
		mixins:[config],
		data() {
			return {
				pageScrollTop: 0,
				roomList: [],
				navMaxHeight:0
			}
		},
		async created() {
			const roomListData = data.roomList();
			this.roomList = await roomListData;
		},
		computed: {
			finddockHeight() {
				return this.navMaxHeight;
			}
		},
		methods: {
			pageScroll(e) {
				customData.old.pageScrollTop = e.detail.scrollTop;
				// console.log(e);
				this.$emit('scrollDeltaY', e.detail.deltaY);
			},
			//页面切换时设置滚动位置，需使用this.$refs引用
			scrollDeltaYTo(deltaY) {
				this.pageScrollTop = customData.old.pageScrollTop + deltaY;
			},
			getNavBarMaxHeight(e){
				this.navMaxHeight = e;
			},
			tpfNavBarIconTap(e){
				console.log(e);
			}
		},
	}
</script>

<style lang="scss" scoped>
	.page-scroll {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
	}
	
	.room-list {
		
	}
	.room {
		overflow: hidden;
		position: relative;
		margin-left: $uni-spacing-col-base;
		margin-right: $uni-spacing-col-base;
		margin-top: $uni-spacing-row-base;
		height: 450rpx;
		border-radius: $uni-border-radius-base;
		
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: space-between;
	}
	.room-bg-img {
		border-radius: $uni-border-radius-base;
		position: absolute;
		width: 750rpx - $uni-spacing-col-base * 2;
		height: 450rpx;
	}
	.room-title {
		background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
		border-top-left-radius: $uni-border-radius-base;
		border-top-right-radius: $uni-border-radius-base;
		
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		
		padding-left: $uni-spacing-col-base;
		padding-right: $uni-spacing-col-base;
		padding-top: $uni-spacing-row-base;
	}
	.room-info {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
	}
	.room-name {
		font-size: $uni-font-size-sm;
		color: $uni-text-color-white;
		// font-weight: bold;
		margin-left: $uni-spacing-col-base;
		position: relative;
	}
	.room-avatar {
		width: $uni-icon-size-sm;
		height: $uni-icon-size-sm;
		border-radius: $uni-border-radius-circle;
	}
	.room-status {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		background-color: $uni-bg-color-mask;
		border-radius: 10000px;
		position:relative;
	}
	.live-status-wrap {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		background-color: $uni-bg-color-red;
		border-radius: 10000px;
		height: 20px;
		padding-left: $uni-spacing-col-base;
		padding-right: $uni-spacing-col-base;
	}
	.live-status {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		// border-width: 1px;
	}
	.live-status-text {
		font-size: $uni-font-size-mi;
		color: $uni-text-color-white;
		// border-width: 1px;
	}
	.room-status-wave {
		// border-width: 1px;
		margin-left: $uni-spacing-col-sm;
	}
	.room-person-count {
		font-size: $uni-font-size-mi;
		// font-weight: bold;
		color: $uni-text-color-white;
		margin-left: $uni-spacing-col-sm;
		margin-right: $uni-spacing-col-base;
	}
	
	.room-content {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		
		background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
		border-bottom-left-radius: $uni-border-radius-base;
		border-bottom-right-radius: $uni-border-radius-base;
	}
	.product-list {
		position: relative;
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		
		margin-left: $uni-spacing-col-base;
		margin-bottom: $uni-spacing-row-base;
	}
	.product {
		overflow: hidden;
		width: 110rpx;
		height: 110rpx;
		border-radius: $uni-border-radius-sm;
		margin-right: $uni-spacing-col-sm;
		position: relative;
	}
	.product-image {
		width: 110rpx;
		height: 110rpx;
		border-radius: $uni-border-radius-sm;
	}
	.product-price {
		font-size: $uni-font-size-sm;
		color: $uni-text-color-white;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		text-align: center;
		background-color: $uni-bg-color-mask;
		border-bottom-left-radius: $uni-border-radius-sm;
		border-bottom-right-radius: $uni-border-radius-sm;
	}
	.product-count-mask {
		position: absolute;
		right: 0;
		// top: 0;
		// bottom: 0;
		color: $uni-text-color-white;
		font-size: $uni-font-size-sm;
		background-color: $uni-bg-color-mask;
		border-radius: $uni-border-radius-sm;
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
</style>
